<script>
import { getRoleList } from '@/api/role'
export default {
  name: 'Role',
  data() {
    return {
      list: [],
      total: 0
    }
  },
  created() {
    this.getRoleList()
  },
  methods: {
    async getRoleList() {
      const { rows, total } = await getRoleList()
      this.list = rows
      this.total = total
    }
  }
}
</script>

<template>
  <div class="role-container">
    <div class="app-container">
      <div class="operate-add">
        <el-button size="medium" type="primary">添加角色</el-button>
      </div>
      <div class="table-container">
        <el-table :data="list">
          <el-table-column prop="name" align="center" width="200" label="角色" />
          <el-table-column prop="state" align="center" width="200" label="启用">
            <template v-slot="{row}">
              <el-tag v-if="row.state===1" type="success">已启用</el-tag>
              <el-tag v-else-if="row.state===0" type="danger">未启用</el-tag>
              <el-tag v-else type="info">无</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="description" align="center" label="描述" />
          <el-table-column align="center" label="操作">
            <template>
              <el-button type="text" size="medium">
                分配权限
              </el-button>
              <el-button type="text" size="medium">
                编辑
              </el-button>
              <el-button type="text" size="medium">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-row type="flex" justify="end" style="height: 60px" align="middle">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
        />
      </el-row>
    </div>
  </div>
</template>

<style scoped lang="scss">
.app-container{
  padding: 30px 14px;
  font-size: 14px;
  margin: 15px 0 0 15px;
  height: 90vh;
  background: #fff;
  .operate-add{
    margin-bottom: 30px;
  }
}

</style>

